<template>
	<view class="container">
		<view class="header">
			<image class="logo" :src="feedbackLogo"></image>
			<view class="text">您好，很抱歉我们暂时无法为您提供服务，如需帮助，
				请留言。我们将尽快联系并解决您的问题</view>
		</view>
		<view class="select-type">
			<view class="tille">选择问题类别</view>
			<view class="type-list">
				<view class="type-item" @click="handleClickItem(index)" :class="{'active':active === index}" v-for="(item,index) in ['投诉','建议','其他']"
				 :key="index">{{item}}</view>
			</view>
		</view>
		<u-form :model="form" ref="uForm" :border-bottom="false">
			<u-form-item label="请描述问题" prop="content" label-position="top">
				<u-input class="textarea" v-model="form.content" type='textarea' height="200" style="background-color: #F5F5F9;padding: 20upx 34upx;box-sizing: content-box;" />
			</u-form-item>
		</u-form>
		<view class="btn" @click="submit">提交</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedbackLogo: this.$mAssetsPath.feedbackLogo,
				active: 0,
				form: {
					content: '',
				},
				rules: {
					content: [{
						required: true,
						message: '请输入内容',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.saveFeedback();
					} else {
						console.log('验证失败');
					}
				});
			},
			async saveFeedback() {
				this.form.type = this.active;
				let data = await this.$apis.saveFeedback(this.form);
				console.log('saveFeedback', data)
				if (data.code === 200) {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						back: 'true'
					})
				}
			},
			handleClickItem(index) {
				this.active = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.btn {
			position: absolute;
			left: 44upx;
			bottom: 74upx;
			width: 662upx;
			height: 80upx;
			border-radius: 40upx;
			background-color: #AC62FF;
			color: #fff;
			line-height: 80upx;
			text-align: center;
		}

		.u-form {
			padding: 0 30upx;

			.uni-textarea-textarea {
				background-color: #F5F5F9;
			}

			.textarea {
				background-color: #F5F5F9;
			}
		}

		.header {
			width: 100%;
			height: 343upx;
			background-color: rgba(255, 158, 34, 0.1);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding: 10upx 0;

			.logo {
				width: 192upx;
				height: 176upx;
			}

			.text {
				width: 606upx;
				color: #BE5208;
				font-size: 26upx;
			}
		}

		.select-type {
			width: 100%;
			padding: 60upx 30upx;

			.title {
				font-size: 32upx;
				color: #0E1E36;
			}

			.type-list {
				width: 100%;
				display: flex;
				height: 70upx;
				margin-top: 33upx;

				.type-item {
					width: 150upx;
					height: 66upx;
					box-sizing: content-box;
					border: #A5A7A9 solid 2upx;
					margin-right: 40upx;
					text-align: center;
					line-height: 66upx;
					border-radius: 35upx;
				}

				.active {
					color: #AC62FF;
					border: #AC62FF solid 2upx;
				}
			}
		}
	}
</style>
